import 'package:flutter/material.dart';
import '/base/view.dart';
import 'package:get/get.dart';
import '/Routes.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'logic.dart';

class LoginPage extends StatelessWidget {
  final logic = Get.put(LoginLogic());
  final state = Get.find<LoginLogic>().state;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xffEFF8FF),
      body: getMyBody(),
    );
  }

  Widget getMyBody() {
    return Container(
      color: Color(0xFFEFF8FF),
      child: ListView(
        children: [
          Stack(
            children: [
              Image.asset(
                "images/login/top_bg.png",
                fit: BoxFit.cover,
              ),
              Container(
                width: double.infinity,
                margin: EdgeInsets.only(
                    top: 148.w, left: 16.w, right: 16.w),
                decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(16.w)),
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    SizedBox(
                      height: 26.w,
                    ),
                    getSelectLoginMode(),
                    SizedBox(
                      height: 30.w,
                    ),
                    getInputForm(),
                    getForgetPassword(),
                    SizedBox(
                      height: 48.w,
                    ),
                    getLoginBtn(),
                    SizedBox(
                      height: 48.w,
                    ),
                  ],
                ),
              )
            ],
          ),
        ],
      ),
    );
  }

  /**
   * 选择登陆方式
   */
  Widget getSelectLoginMode() {
    return Obx(() {
      return Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          GestureDetector(
            child: getLoginModeItem("账号登录", logic.isSelect.value),
            onTap: () {
              logic.isSelect.value = true;
            },
          ),
          SizedBox(
            width: 46.w,
          ),
          GestureDetector(
            child: getLoginModeItem("验证码登录", !logic.isSelect.value),
            onTap: () {
              logic.isSelect.value = false;
            },
          )
        ],
      );
    });
  }

  Widget getLoginModeItem(String title, bool isSelect) {
    return Column(
      children: [
        Container(
          alignment: Alignment.center,
          height: 25.w,
          child: Text(
            title,
            style: TextStyle(
                color: Color(
                  isSelect ? 0xFF333333 : 0xFF999999,
                ),
                fontSize: isSelect ? 18.w : 15.w,
                fontWeight: isSelect ? FontWeight.bold : FontWeight.normal),
          ),
        ),
        SizedBox(
          height: 8.w,
        ),
        Visibility(
          visible: isSelect,
          child: Container(
            width: 42.w,
            height: 5.w,
            decoration: BoxDecoration(
                color: Color(0xFF00A4F5),
                borderRadius: BorderRadius.circular(5.w)),
          ),
        )
      ],
    );
  }

  /**
   * 输入表单
   */
  Widget getInputForm() {
    return Container(
      margin: EdgeInsets.symmetric(horizontal: 30.w),
      child: Column(
        children: [
          getUserName(),
          SizedBox(
            height: 16.w,
          ),
          getService(),
          SizedBox(
            height: 16.w,
          ),
          getSelectCompany(),
          SizedBox(
            height: 16.w,
          ),
          getPassword(),
        ],
      ),
    );
  }

  /**
   * 输入用户名
   */
  Widget getUserName() {
    return TextField(
      buildCounter: null,
      maxLines: 1,
      maxLength: 30,
      keyboardType: TextInputType.phone,
      style: TextStyle(fontSize: 14.w, color: Color(0xff333333)),
      decoration: InputDecoration(
        counterText: "",
        hintText: "请输入账号/手机号",
        hintStyle: TextStyle(color: Color(0xff999999), fontSize: 14.w),
        prefixIcon: Image.asset(
          "images/login/user_name.png",
          width: 28.w,
          height: 28.w,
        ),
        border: InputBorder.none,
        fillColor: Color(0xffEFF5FC),
        filled: true,
        contentPadding: EdgeInsets.only(top: 10.w, bottom: 10.w),
        enabledBorder: OutlineInputBorder(
            borderRadius: BorderRadius.circular(6.w),
            borderSide: BorderSide(
              color: Colors.white,
              width: 0,
            )),
        focusedBorder: OutlineInputBorder(
            borderRadius: BorderRadius.circular(6.w),
            borderSide: BorderSide(
              color: Colors.white,
              width: 0,
            )),
      ),
    );
  }

  /**
   * 选择服务器
   */
  Widget getService() {
    return TextField(
      buildCounter: null,
      maxLines: 1,
      maxLength: 30,
      keyboardType: TextInputType.text,
      style: TextStyle(fontSize: 14.w, color: Color(0xff333333)),
      decoration: InputDecoration(
        counterText: "",
        hintText: "请选择服务器",
        hintStyle: TextStyle(color: Color(0xff999999), fontSize: 14.w),
        prefixIcon: Image.asset(
          "images/login/service.png",
          width: 28.w,
          height: 28.w,
        ),
        suffixIcon: Container(
          child: Icon(Icons.arrow_drop_down, color: Color(0xFF99A9BF)),
          width: 9.w,
          height: 6.w,
        ),
        border: InputBorder.none,
        fillColor: Color(0xffEFF5FC),
        filled: true,
        contentPadding: EdgeInsets.only(top: 10.w, bottom: 10.w),
        enabledBorder: OutlineInputBorder(
            borderRadius: BorderRadius.circular(6.w),
            borderSide: BorderSide(
              color: Colors.white,
              width: 0,
            )),
        focusedBorder: OutlineInputBorder(
            borderRadius: BorderRadius.circular(6.w),
            borderSide: BorderSide(
              color: Colors.white,
              width: 0,
            )),
      ),
    );
  }

  /**
   * 选择公司
   */
  Widget getSelectCompany() {
    return TextField(
      buildCounter: null,
      maxLines: 1,
      maxLength: 30,
      keyboardType: TextInputType.text,
      style: TextStyle(fontSize: 14.w, color: Color(0xff333333)),
      decoration: InputDecoration(
        counterText: "",
        hintText: "请选择公司",
        hintStyle: TextStyle(color: Color(0xff999999), fontSize: 14.w),
        prefixIcon: Image.asset(
          "images/login/select_company.png",
          width: 28.w,
          height: 28.w,
        ),
        suffixIcon: Container(
          child: Icon(Icons.arrow_drop_down, color: Color(0xFF99A9BF)),
          width: 9.w,
          height: 6.w,
        ),
        border: InputBorder.none,
        fillColor: Color(0xffEFF5FC),
        filled: true,
        contentPadding: EdgeInsets.only(top: 10.w, bottom: 10.w),
        enabledBorder: OutlineInputBorder(
            borderRadius: BorderRadius.circular(6.w),
            borderSide: BorderSide(
              color: Colors.white,
              width: 0,
            )),
        focusedBorder: OutlineInputBorder(
            borderRadius: BorderRadius.circular(6.w),
            borderSide: BorderSide(
              color: Colors.white,
              width: 0,
            )),
      ),
    );
  }

  /**
   * 输入密码
   */
  Widget getPassword() {
    return GetBuilder<LoginLogic>(builder: (logic) {
      return TextField(
        buildCounter: null,
        maxLines: 1,
        maxLength: 30,
        keyboardType: TextInputType.visiblePassword,
        style: TextStyle(fontSize: 14.w, color: Color(0xff333333)),
        obscureText: logic.obscureText,
        decoration: InputDecoration(
          counterText: "",
          hintText: "请输入密码",
          hintStyle: TextStyle(color: Color(0xff999999), fontSize: 14.w),
          prefixIcon: Image.asset(
            "images/login/password.png",
            width: 28.w,
            height: 28.w,
          ),
          suffixIcon: GestureDetector(
              onTap: (){
                logic.obscureText = !logic.obscureText;
              },
              child: Icon(logic.obscureText?Icons.visibility_off:Icons.visibility_rounded)),
          border: InputBorder.none,
          fillColor: Color(0xffEFF5FC),
          filled: true,
          contentPadding: EdgeInsets.only(top: 10.w, bottom: 10.w),
          enabledBorder: OutlineInputBorder(
              borderRadius: BorderRadius.circular(6.w),
              borderSide: BorderSide(
                color: Colors.white,
                width: 0,
              )),
          focusedBorder: OutlineInputBorder(
              borderRadius: BorderRadius.circular(6.w),
              borderSide: BorderSide(
                color: Colors.white,
                width: 0,
              )),
        ),
      );
    });
  }

  /**
   * 忘记密码
   */
  Widget getForgetPassword() {
    return Row(
      textDirection: TextDirection.rtl,
      children: [
        Container(
            padding: EdgeInsets.only(top: 8.w, right: 30.w),
            child: Text(
              "忘记密码?",
              style: TextStyle(fontSize: 14.w, color: Color(0xFF00A4F5)),
            ))
      ],
    );
  }

  /**
   * 登录按钮
   */
  Widget getLoginBtn() {
    return Container(
      height: 49.w,
      width: double.infinity,
      margin: EdgeInsets.symmetric(horizontal: 30.w),
      decoration: BoxDecoration(
          color: Color(0xFFC3E4FB), borderRadius: BorderRadius.circular(6.w)),
      child: TextButton(
        child: Text(
          "登 录",
          style: TextStyle(fontSize: 16.w, color: Color(0xFF5494C1)),
        ),
        onPressed: () {
          Get.offAllNamed(Routes.routeMain);
        },
      ),
    );
  }
}
